<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-11-13 10:07:44
 * @Descripttion: 
-->
<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :option="tableOption"
        :data="tableData"
        v-model="form"
        :table-loading="tableLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="searchChange"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft" slot-scope="scope">
          <el-button type="primary" icon size="small" plain @click.stop="handleDao">导出</el-button>
          <br />
          <span style="display: inline-block;inline-margin:10px 20px 10px 0">贷款总额：14379.50</span>
          <span style="display: inline-block;margin:10px 20px 10px 0">待结算：14379.50</span>
          <span style="display: inline-block;margin:10px 20px 10px 0">已结算：14379.50</span>
        </template>
        <template slot="e" slot-scope="scope">
          <span style="color:#AB82FF" @click="handleLoan()">{{scope.row.e}}</span>
        </template>
        <template slot="f" slot-scope="scope">
          <span style="color:#AB82FF" @click="handleRefund()">{{scope.row.f}}</span>
        </template>
      
      </avue-crud>
    </basic-container>
    <el-dialog
      :visible.sync="dialogLoanVisible"
      title="贷款明细 "
      width="70%"
      @close="LoanItemVisible"
    >
     <loan-details></loan-details>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogRefundVisible"
      title="退款明细 "
      width="70%"
      @close="RefundItemVisible"
    >
    <refund-details></refund-details>
    </el-dialog>
  </div>
</template>

<script>
import { tableOption } from "@/const/crud/loan/loanStatement";
import loanDetails from "../components/loanDetails"
import refundDetails from "../components/refundDetails"
export default {
  name: "loanStatement",
  components:{
      loanDetails,
      refundDetails
  },
  data() {
    return {
      tableData: [
        {
          a: "花花牛（1234567）",
          b: 111111,
          c: 1111,
          d: 1111,
          e: 111222,
          f: 222223,
          g: 111,
          h: 333,
          i: "rrr",
        },
      ],
      searchForm: {},
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableOption: tableOption,
      tableLoading: false,
      form: {},
      searchForm: {},
        dialogLoanVisible: false,
        dialogRefundVisible: false,
    };
  },
  methods: {
    getList() {},
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange() {
      this.page.currentPage = 1;
      this.getList();
    },
    refreshChange() {
      this.getList(this.page);
    },
    handleLoan: function () {
      this.dialogLoanVisible = true;
    },
    LoanItemVisible() {
      this.dialogLoanVisible = false;
    },
    handleRefund: function () {
      this.dialogRefundVisible = true;
    },
    RefundItemVisible() {
      this.dialogRefundVisible = false;
    },
  
  },
};
</script>

<style lang="scss" scoped>
</style>